<template>
    <div>
        <!--质量分析-->
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">汇总统计</mt-tab-item>
            <mt-tab-item id="2">成绩趋势</mt-tab-item>
            <mt-tab-item id="3">成绩明细</mt-tab-item>
        </mt-navbar>




		<ul class="mui-table-view">
                    <li @click="toggle" class="mui-table-view-cell">
                        <!--<i slot="icon" class="alicon icon-shaixuan" style="font-size: 20px;position:relative;top: 2px;"></i>-->
                        <span >筛选：{{departmentSelectLabel}} | {{gradeSelectLabel}} | {{classSelectLabel}} |{{subjectSelectLabel}} | </span>
						<i slot="icon" class="alicon icon-arrow" style="font-size: 16px;position:absolute;top: 11px;right: 16px;"></i>
                    </li>
                    <!--<div style="padding-bottom: 10px;">
                        <div style="border-radius: 5px;width: 88%;margin:0 auto;padding:5px;background-color: #F7D15E;">
                            <div style="width:73%;display: inline-block;padding-left: 10px;">考试人数：</div>
                            <div style="width:25%;color: red;display: inline-block;padding-right: 10px;text-align: center;">共396人</div>
                        </div>
                    </div>-->

                </ul>
                <mt-popup v-model="popupVisible" :modal="false" class="mint-popup" position="top">
                    <div :style="pophightclass">
                        <div style="padding: 14px 25px 124px 25px;">
                            <div style="color: #666666;font-size: 12pt;">学部</div>
                            <div @click="choosedepartment" v-for="item in departmentList" style="width: 25%;text-align: center;display: inline-block;">
                                <div v-bind:class="[departmentSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    {{item.label}}
                                </div>
                            </div>

                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">年段</div>
                            <div @click="chooseGrade" v-for="item in gradeList" style="width: 25%;text-align: center;display: inline-block;">
                                <div v-bind:class="[gradeSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    {{item.label}}
                                </div>
                            </div>

                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">班级</div>
                            <div @click="chooseClass" v-for="item in classList" style="width: 25%;text-align: center;display: inline-block;">
                                <div v-bind:class="[classSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    {{item.label}}
                                </div>
                            </div>
                            
                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">科目</div>
                            <div @click="chooseSubject" v-for="item in subjectList" style="width: 25%;text-align: center;display: inline-block;">
                                <div v-bind:class="[subjectSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    {{item.label}}
                                </div>
                            </div>
                            
                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">学年</div>
                            <div @click="chooseStudyYear" v-for="item in studyYearList" style="width: 33%;text-align: center;display: inline-block;">
                                <div v-bind:class="[studyYearSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 100px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    {{item.label}}
                                </div>
                            </div>
                            <div v-if="selected == 2?false:true">
                            	<hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
	                            <div style="color: #666666;font-size: 12pt;">考试列表</div>
	                            <div @click="chooseExam" v-for="item in examList" style="width: auto;text-align: center;display: inline-block;padding: 5px;">
	                                <div v-bind:class="[examSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="padding:0px 5px;margin: 0 auto;font-size: 12pt;width: auto;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
	                                    {{item.label}}
	                                </div>
	                            </div>
                            </div>
                            
                        </div>

                        <div style="position: fixed;bottom: 102px;width: 100%;">
                            <mt-button @click="canelButton" style="float: left;height:49px;border-radius: 0px;width:50%;background-color: white;color: #999999;">取消</mt-button>
                            <mt-button @click="getDataButton" style="float: left;height:49px;border-radius: 0px;width:50%;background-color: #517EDB;color: white;">确定</mt-button>
                        </div>
                    </div>
                </mt-popup>




        <!-- tab-container -->
        <mt-tab-container style="margin-top: 5px;" v-model="selected">
            <mt-tab-container-item id="1">

                
                <div v-for="item in BasicInfo" style="background-color: white;margin-top: 8px;padding: 20px;">
                    <div style="">概况</div>
                    <div style="text-align: center;margin-top: 15px;">
                        <div style="display: inline-block;width: 31%;">
                            <div style="color: #EE5D4A;">{{item.maxResult}}</div>
                            <div style="color: #666666;font-size: 13px;">最高分</div>
                        </div>
                        <div style="display: inline-block;width: 31%;">
                            <div style="color: #EE5D4A;">{{item.minResult}}</div>
                            <div style="color: #666666;font-size: 13px;">最低分</div>
                        </div>
                        <div style="display: inline-block;width: 31%;">
                            <div style="color: #EE5D4A;">{{item.average}}</div>
                            <div style="color: #666666;font-size: 13px;">平均分</div>
                        </div>
                    </div>
                    <div style="text-align: center;margin-top: 15px;">
                        <div style="display: inline-block;width: 31%;">
                            <div style="color: #EE5D4A;">{{item.excellentRate}}%</div>
                            <div style="color: #666666;font-size: 13px;">优秀率</div>
                        </div>
                        <div style="display: inline-block;width: 31%;">
                            <div style="color: #EE5D4A;">{{item.passRate}}%</div>
                            <div style="color: #666666;font-size: 13px;">及格率</div>
                        </div>
                        <div style="display: inline-block;width: 31%;">
                            <div style="color: #EE5D4A;">{{item.lowScoreRate}}</div>
                            <div style="color: #666666;font-size: 13px;">综合指数</div>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
                <div style="background-color: white;padding: 20px 0px 10px 0px;">
                    <div>
                        <!--<span style="margin-left: 20px;">人数占比:</span>-->
                        <div style="width:48%;display: inline-block;padding-left: 20px;">人数占比:</div>
                        <div style="width:50%;color: red;display: inline-block;padding-right: 20px;text-align: right;">
                            <mt-button v-bind:class="[activeButton == '1'?buttonActiveClass:'']" @click="getPieData('1')" size="small" style="display: inline-block;height: 25px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;margin-right: -4px;">排名</mt-button>
                            <mt-button v-bind:class="[activeButton == '2'?buttonActiveClass:'']" @click="getPieData('2')" size="small" style="display: inline-block;height: 25px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;">成绩</mt-button>
                        </div>
                    </div>
                    <div style="clear:both;margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
                        <div id="myChart" ref="Pie" :style="{width: '98%', height: '270px',margin:'0 auto'}"></div>
                    </div>
                </div>

            </mt-tab-container-item>
            <!--第二部分-->
            <mt-tab-container-item id="2">

                <!--<ul class="mui-table-view">
                    <li @click="toggle1" class="mui-table-view-cell">
                        <i slot="icon" class="alicon icon-shaixuan" style="font-size: 20px;position:relative;top: 2px;"></i>
                        <span class="mui-navigate-right">筛选：{{department1}} | {{+subject1}} | {{teacher1}}</span>
                    </li>
                </ul>
                <mt-popup v-model="popupVisible1" :modal="false" class="mint-popup" position="top">
                    <div :style="pophightclass">
                        <div style="padding: 14px 25px 60px 25px;">
                            <div style="color: #666666;font-size: 12pt;">部门</div>
                            <div v-for="item in 10" style="width: 25%;text-align: center;display: inline-block;">
                                <div style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    呜呜呜
                                </div>
                            </div>

                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">科目</div>
                            <div v-for="item in 10" style="width: 25%;text-align: center;display: inline-block;">
                                <div style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    语文
                                </div>
                            </div>

                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">教师</div>
                            <div v-for="item in 40" style="width: 25%;text-align: center;display: inline-block;">
                                <div style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    教师
                                </div>
                            </div>
                        </div>

                        <div style="position: fixed;bottom: 102px;width: 100%;">
                            <mt-button style="float: left;height:49px;border-radius: 0px;width:50%;background-color: white;color: #999999;">取消</mt-button>
                            <mt-button style="float: left;height:49px;border-radius: 0px;width:50%;background-color: #517EDB;color: white;">确定</mt-button>
                        </div>
                    </div>
                </mt-popup>-->
                <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
                <div style="background-color: white;padding: 20px 0px 20px 0px;">
                    <div>
                        <span style="margin-left: 20px;font-weight: 500;">本学年成绩趋势图:</span>
                    </div>
                    <div style="margin-top: 5px;">
                        <span style="margin-left:20px;font-size: 15px;">平均分：</span>
                    </div>
                    <div style="margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
                        <div id="myChart" ref="line_average" :style="{width: '98%', height: '150px',margin:'0 auto'}"></div>
                    </div>
                </div>
                <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
                <div style="background-color: white;padding: 20px 0px 20px 0px;">
                    <div style="margin-top: 5px;">
                        <span style="margin-left:20px;font-size: 15px;">优秀率：</span>
                    </div>
                    <div style="margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
                        <div id="myChart" ref="line_excellent" :style="{width: '98%', height: '150px',margin:'0 auto'}"></div>
                    </div>
                </div>
                <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
                <div style="background-color: white;padding: 20px 0px 20px 0px;">
                    <div style="margin-top: 5px;">
                        <span style="margin-left:20px;font-size: 15px;">及格率：</span>
                    </div>
                    <div style="margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
                        <div id="myChart" ref="line_pass" :style="{width: '98%', height: '150px',margin:'0 auto'}"></div>
                    </div>
                </div>
                <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
                <div style="background-color: white;padding: 20px 0px 20px 0px;">
                    <div style="margin-top: 5px;">
                        <span style="margin-left:20px;font-size: 15px;">低分率：</span>
                    </div>
                    <div style="margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
                        <div id="myChart" ref="line_less" :style="{width: '98%', height: '150px',margin:'0 auto'}"></div>
                    </div>
                </div>
                <!--<div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
                <div style="background-color: white;padding: 20px 0px 20px 0px;">
                    <div style="margin-top: 5px;">
                        <span style="margin-left:20px;font-size: 15px;">提升率：</span>
                    </div>
                    <div style="margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
                        <div id="myChart" ref="line_promote" :style="{width: '98%', height: '150px',margin:'0 auto'}"></div>
                    </div>
                </div>-->

            </mt-tab-container-item>
            <!--第三部分-->
            <mt-tab-container-item id="3">

                <!--<ul class="mui-table-view">
                    <li @click="toggle2" class="mui-table-view-cell">
                        <i slot="icon" class="alicon icon-shaixuan" style="font-size: 20px;position:relative;top: 2px;"></i>
                        <span class="mui-navigate-right">筛选：{{department2}} | {{+subject2}} | {{teacher2}}</span>
                    </li>
                    <div style="padding-bottom: 10px;">
                        <div style="border-radius: 5px;width: 88%;margin:0 auto;padding:5px;background-color: #F7D15E;">
                            <div style="width:73%;display: inline-block;padding-left: 10px;">考试人数：</div>
                            <div style="width:25%;color: red;display: inline-block;padding-right: 10px;text-align: center;">共396人</div>
                        </div>
                    </div>

                </ul>
                <mt-popup v-model="popupVisible2" :modal="false" class="mint-popup" position="top">
                    <div :style="pophightclass">
                        <div style="padding: 14px 25px 124px 25px;">
                            <div style="color: #666666;font-size: 12pt;">部门</div>
                            <div v-for="item in 10" style="width: 25%;text-align: center;display: inline-block;">
                                <div style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    呜呜呜
                                </div>
                            </div>

                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">科目</div>
                            <div v-for="item in 10" style="width: 25%;text-align: center;display: inline-block;">
                                <div style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    语文
                                </div>
                            </div>

                            <hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
                            <div style="color: #666666;font-size: 12pt;">教师</div>
                            <div v-for="item in 40" style="width: 25%;text-align: center;display: inline-block;">
                                <div style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
                                    教师
                                </div>
                            </div>
                        </div>

                        <div style="position: fixed;bottom: 102px;width: 100%;">
                            <mt-button style="float: left;height:49px;border-radius: 0px;width:50%;background-color: white;color: #999999;">取消</mt-button>
                            <mt-button style="float: left;height:49px;border-radius: 0px;width:50%;background-color: #517EDB;color: white;">确定</mt-button>
                        </div>
                    </div>
                </mt-popup>-->
                <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
                <div style="background-color: white;width: 100%;padding: 20px;">
                    <div style="background-color: #F2F2F2;width: 100%;margin: 0 auto;border-radius: 5px;padding: 3px 0px 3px 0px;">
                        <div style="display: inline-block;width: 23%;text-align: center;">姓名</div>
                        <div style="display: inline-block;width: 23%;text-align: center;">成绩<span>(等级)</span></div>
                        <div style="display: inline-block;width: 23%;text-align: center;">班级排名</div>
                        <div style="display: inline-block;width: 23%;text-align: center;">年段排名</div>
                    </div>
                    <div v-for="item in studentResultArr" @click="studentResult(item.id)" style="width: 100%;margin: 0 auto;margin-top: 15px;padding-bottom:15px;border-bottom: 1px solid #F2F2F2;">
                        <div style="display: inline-block;width: 23%;text-align: center;">{{item.studentName}}</div>
                        <div style="display: inline-block;width: 23%;text-align: center;">{{item.score}}({{item.level}})</div>
                        <div style="display: inline-block;width: 23%;text-align: center;">
                        	{{item.classRanking}}
                        	<span style="color: #46E062;" v-if="Number(item.classRankingLift) > 0?true:false">
                        		<i slot="icon" class="alicon icon-shangshengzengjia" style="font-size: 18px;"></i>
                        		{{Math.abs(item.classRankingLift)}}
                        	</span>
                        	<span style="color: #EE5D4A;" v-if="Number(item.classRankingLift) < 0?true:false">
                        		<i slot="icon" class="alicon icon-shangshengzengjia-copy" style="font-size: 18px;"></i>
                        		{{Math.abs(item.classRankingLift)}}
                        	</span>
                        </div>
                        <div style="display: inline-block;width: 23%;text-align: center;">
                        	{{item.gradeRanking}}
                        	<span style="color: #46E062;" v-if="Number(item.gradeRankingLift) > 0?true:false">
                        		<i slot="icon" class="alicon icon-shangshengzengjia" style="font-size: 18px;"></i>
                        		{{Math.abs(item.gradeRankingLift)}}
                        	</span>
                        	<span style="color: #EE5D4A;" v-if="Number(item.gradeRankingLift) < 0?true:false">
                        		<i slot="icon" class="alicon icon-shangshengzengjia-copy" style="font-size: 18px;"></i>
                        		{{Math.abs(item.gradeRankingLift)}}
                        	</span>
                        </div>
                    </div>
                </div>

            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
    import api from "@/components/js/Apidomain.js"
    import { setsessionstorage,getsessionstorage } from '@/components/js/Localstorage'
    import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                selected: "1",
                //旁边两个tab的echart挂载
                chartmounted2: false,

                //第一部分
                popupVisible: false, //选择框的显示隐藏
                //学部
                departmentSelectValue: "", //部门选择的值(初高中)
                departmentSelectLabel: "22", //部门选择的名称
                //年级
                gradeSelectValue: "", //年级选择的值
                gradeSelectLabel: "33", //年级选择的名称
                //班级
                classSelectValue: "", //班级选择的值
                classSelectLabel: "44", //班级选择的名称
                //科目
                subjectSelectValue: "", //科目选择的值
                subjectSelectLabel: "55", //科目选择的名称
                //学年
                studyYearSelectValue: "", //学年选择的值
                studyYearSelectLabel: "", //学年选择的名称
                //考试名称
                examSelectValue: "", //考试选择的值
                examSelectLabel: "", //考试选择的名称

                departmentList: [],
                gradeList: [],
                classList: [],
                subjectList: [],
                studyYearList: [],
                examList: [],
                
                activeButton:"1",		//排名，成绩的激活按钮
                
                BasicInfo:[			//概况信息
                	{	
                		"maxResult": "-",
			            "minResult": "-",
			            "average": "-",
			            "excellentRate": "-",
			            "passRate": "-",
			            "lowScoreRate": "-"
			        }
                ],		

                //饼图
                peoplePie: {
                    title: {
                        text: '',
                        //				        subtext: '虚构数据',
                        left: 'left',
                        textStyle: {
                            fontSize: "15",
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}人 ({d}%)"
                    },
                    legend: {
                        // orient: 'vertical',
                        // top: 'middle',
                        y2: "0",
                        bottom: "0%",
                        left: "center",
                        data: "",

                    },
                    series: [

                        {
                            name: '',
                            type: 'pie',
                            radius: ['25%', '65%'],
                            center: ['50%', '43%'],
                            selectedMode: 'single',
				            label: {
				                normal: {
				                    formatter: '{c}人',
//				                    formatter: '{per|{d}%}\n \n  {b|{b}：}{c}人',
				                    rich: {},
				                    textStyle: {
					                    "fontSize": 12
					                }
				                }
				                
				            },
                            data: [
//                          	{value: 335,name: '直接访问'},
//                              {value: 310,name: '邮件营销'},
//                              {value: 234,name: '联盟广告'},
//                              {value: 135,name: '视频广告'},
//                              {value: 1548,name: '搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },

                //第二部分
//              popupVisible1: false, //选择框的显示隐藏
//              department1: "初中", //部门
//              subject1: "语文", //科目
//              teacher1: "呜呜呜", //教师

                linedata_average: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
//				    legend: {
//				    	y: 'bottom', // 'center' | 'bottom' | {number}
//				        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
//				        textStyle: {
// 					        "fontSize": 12
// 					    }
//				    },
                    grid: {
                        y: '5%',
                        left: '2%',
                        right: '5%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: "",
//                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
//                  	{
//                          name: '邮件营销',
//                          type: 'line',
//                          data: [120, 132, 101, 134, 90, 230, 210]
//                      },
//                      {
//                          name: '联盟广告',
//                          type: 'line',
//                          data: [220, 182, 191, 234, 290, 330, 310]
//                      },
                    ]
                },
                linedata_excellent: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        y: '5%',
                        left: '2%',
                        right: '5%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: "",
//                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
//                  	{
//                          name: '邮件营销',
//                          type: 'line',
//                          data: [120, 132, 101, 134, 90, 230, 210]
//                      },
//                      {
//                          name: '联盟广告',
//                          type: 'line',
//                          data: [220, 182, 191, 234, 290, 330, 310]
//                      },
                    ]
                },
                linedata_pass: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        y: '5%',
                        left: '2%',
                        right: '5%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: "",
//                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
//                  	{
//                          name: '邮件营销',
//                          type: 'line',
//                          data: [120, 132, 101, 134, 90, 230, 210]
//                      },
//                      {
//                          name: '联盟广告',
//                          type: 'line',
//                          data: [220, 182, 191, 234, 290, 330, 310]
//                      },
                    ]
                },
                linedata_less: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        y: '5%',
                        left: '2%',
                        right: '5%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: "",
//                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
//                  	{
//                          name: '邮件营销',
//                          type: 'line',
//                          data: [120, 132, 101, 134, 90, 230, 210]
//                      },
//                      {
//                          name: '联盟广告',
//                          type: 'line',
//                          data: [220, 182, 191, 234, 290, 330, 310]
//                      },
                    ]
               },

                //第三部分
                studentResultArr:[]
//              popupVisible2: false, //选择框的显示隐藏
//              department2: "初中", //部门
//              subject2: "语文", //科目
//              teacher2: "呜呜呜", //教师

            }
        },
        computed: {
            pophightclass: function() {
                return {
                    overflow: 'scroll',
                    height: document.documentElement.clientHeight - 45 + "px",
                }
            },
            activeclass: function() {
                return 'active'
            },
            buttonActiveClass: function() {
                return 'buttonActive'
            },
        },
        created() {
            //第一部分
            this.getDepartmentList()

        },
        mounted() {
            this.drawPie()

        },
        methods: {
            //第一部分
            toggle: function() {
                if(this.popupVisible) {
                    this.popupVisible = false;
                } else {
                    this.popupVisible = true;
                }

            },
            drawPie() {
                this.$nextTick(function() {
                    let myChart = this.$echarts.init(this.$refs.Pie, 'hengyi')
                    myChart.clear();
                    myChart.setOption(this.peoplePie);
                    myChart.resize();
                })
            },
            //获取学部
            getDepartmentList: function() {
                var self = this;
                let roleId = getsessionstorage('roleid')
                let url = api.apidomain + '/tqes/web/squaAnalysis/getQueryDepat';
                this.$http.post(url, {
                        "roleId": roleId
                    }).then(function(response) {
                        if(response.data.success == true) {
                            //						console.log(response.data.data)
                            self.departmentList = response.data.data;
                            if(self.departmentList.length >= 1) {
                                self.departmentSelectValue = self.departmentList[0].value
                                self.departmentSelectLabel = self.departmentList[0].label
                            }else{
                            	self.departmentSelectValue = ""
                                self.departmentSelectLabel = ""
                            }
                            self.getGradeList()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            //获取年级
            getGradeList: function() {
                var self = this;
                let roleId = getsessionstorage('roleid')
                let url = api.apidomain + '/tqes/web/squaAnalysis/getQueryGrade';
                this.$http.post(url, {
                        "roleId": roleId,
                        "type": this.departmentSelectValue
                    }).then(function(response) {
                        if(response.data.success == true) {
                            //						console.log(response.data.data)
                            self.gradeList = response.data.data;
                            if(self.gradeList.length >= 1) {
                                self.gradeSelectValue = self.gradeList[0].value
                                self.gradeSelectLabel = self.gradeList[0].label
                            }else{
                            	self.gradeSelectValue = ""
                                self.gradeSelectLabel = ""
                            }
                            self.getClassList()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            //获取班级
            getClassList: function() {
                var self = this;
                let roleId = getsessionstorage('roleid')
                let url = api.apidomain + '/tqes/web/squaAnalysis/getQueryClasses';
                this.$http.post(url, {
                        "roleId": roleId,
                        "gradeId": this.gradeSelectValue
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                            self.classList = response.data.data;
                            if(self.classList.length >= 1) {
                                self.classSelectValue = self.classList[0].value
                                self.classSelectLabel = self.classList[0].label
                            }else{
                            	self.classSelectValue = ""
                                self.classSelectLabel = ""
                            }
							self.getSubjectList()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            //获取学科
            getSubjectList: function() {
                var self = this;
                let roleId = getsessionstorage('roleid')
                let url = api.apidomain + '/tqes/web/squaAnalysis/getQuerySubject';
                this.$http.post(url, {
                        "roleId": roleId,
//                      "gradeId": this.gradeSelectValue
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                            self.subjectList = response.data.data;
                            if(self.subjectList.length >= 1) {
                                self.subjectSelectValue = self.subjectList[0].value
                                self.subjectSelectLabel = self.subjectList[0].label
                            }else{
                            	self.subjectSelectValue = ""
                                self.subjectSelectLabel = ""
                            }
							self.getStudyYearList()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            //获取学年
            getStudyYearList: function() {
                var self = this;
                let roleId = getsessionstorage('roleid')
                let url = api.apidomain + '/tqes/web/squaAnalysis/getQuerySchoolYearSelect';
                this.$http.post(url, {
                        "gradeId": this.gradeSelectValue
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                            self.studyYearList = response.data.data;
                            if(self.studyYearList.length >= 1) {
                                self.studyYearSelectValue = self.studyYearList[0].value
                                self.studyYearSelectLabel = self.studyYearList[0].label
                            }else{
                            	self.studyYearSelectValue = ""
                                self.studyYearSelectLabel = ""
                            }
							self.getExamList()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            //获取考试列表
            getExamList: function() {
                var self = this;
                let roleId = getsessionstorage('roleid')
                let url = api.apidomain + '/tqes/web/squaAnalysis/getQueryAnalysis';
                this.$http.post(url, {
                		"schoolYearStart":this.studyYearSelectValue,
                        "gradeId": this.gradeSelectValue
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                            self.examList = response.data.data.analysis;
                            if(self.examList.length >= 1) {
                                self.examSelectValue = self.examList[0].value
                                self.examSelectLabel = self.examList[0].label
                            }else{
                            	self.examSelectValue = ""
                                self.examSelectLabel = ""
                            }
                            self.getBasicInfo()
							self.getPeoplePieInfo()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            //更改学部触发函数
            choosedepartment: function(e) {
                let dom = e.target;
                var domlabel = dom.getAttribute("label");
                var domvalue = dom.getAttribute("value");
                //如果点到空白地方
                if(dom.getAttribute("label") == null) {
                    return;
                }
                this.departmentSelectValue = domvalue
                this.departmentSelectLabel = domlabel
                this.getGradeList()
            },
            //更改学年触发函数
            chooseGrade: function(e) {
                let dom = e.target;
                var domlabel = dom.getAttribute("label");
                var domvalue = dom.getAttribute("value");
                //如果点到空白地方
                if(dom.getAttribute("label") == null) {
                    return;
                }
                this.gradeSelectValue = domvalue
                this.gradeSelectLabel = domlabel
                this.getClassList()
            },
            chooseClass: function(e) {
                let dom = e.target;
                var domlabel = dom.getAttribute("label");
                var domvalue = dom.getAttribute("value");
                //如果点到空白地方
                if(dom.getAttribute("label") == null) {
                    return;
                }
                this.classSelectValue = domvalue
                this.classSelectLabel = domlabel
                this.getSubjectList()
            },
            chooseSubject: function(e) {
                let dom = e.target;
                var domlabel = dom.getAttribute("label");
                var domvalue = dom.getAttribute("value");
                //如果点到空白地方
                if(dom.getAttribute("label") == null) {
                    return;
                }
                this.subjectSelectValue = domvalue
                this.subjectSelectLabel = domlabel
                this.getStudyYearList()
            },
            chooseStudyYear: function(e) {
                let dom = e.target;
                var domlabel = dom.getAttribute("label");
                var domvalue = dom.getAttribute("value");
                //如果点到空白地方
                if(dom.getAttribute("label") == null) {
                    return;
                }
                this.studyYearSelectValue = domvalue
                this.studyYearSelectLabel = domlabel
                this.getExamList()
            },
            chooseExam: function(e) {
                let dom = e.target;
                var domlabel = dom.getAttribute("label");
                var domvalue = dom.getAttribute("value");
                //如果点到空白地方
                if(dom.getAttribute("label") == null) {
                    return;
                }
                this.examSelectValue = domvalue
                this.examSelectLabel = domlabel
                //this.getClassList()
            },
            canelButton:function(){
        		this.popupVisible = false;
        	},
        	getDataButton:function(){
        		if(this.selected == "1"){
        			this.getBasicInfo();
	        		this.getPeoplePieInfo();
	        		this.popupVisible = false;
        		}
        		if(this.selected == "2"){
        			this.getAllLine()
        			this.popupVisible = false;
        		}
        		if(this.selected == "3"){
        			this.getStudentResult()
        			this.popupVisible = false;
        		}
        		
        		
        	},
            //获取概况信息
            getBasicInfo: function() {
                var self = this;
                let url = api.apidomain + '/tqes/web/squaAnalysis/getSummaryStatistics';
                this.$http.post(url, {
                        "gradeId": this.gradeSelectValue,
                        "classesId":this.classSelectValue,
                        "subjectId":this.subjectSelectValue,
                        "analysisId":this.examSelectValue
                    }).then(function(response) {
                        if(response.data.success == true) {
                            console.log(response.data.data)
                            if(response.data.data.maxResult == ""){
                            	self.BasicInfo = [{"maxResult": "-","minResult": "-","average": "-","excellentRate": "-","passRate": "-","lowScoreRate": "-"}]
                            }else{
                            	self.BasicInfo = [];
                            	self.BasicInfo.push(response.data.data)
                            }
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            //获取人数占比饼图
            getPeoplePieInfo: function() {
                var self = this;
                let url = api.apidomain + '/tqes/web/squaAnalysis/getSummaryStatisticsPie';
                this.$http.post(url, {
                        "gradeId": this.gradeSelectValue,
                        "classesId":this.classSelectValue,
                        "subjectId":this.subjectSelectValue,
                        "analysisId":this.examSelectValue,
                        "type":this.activeButton
                    }).then(function(response) {
                        if(response.data.success == true) {
                            console.log(response.data.data.date)
                            self.peoplePie.legend.data = response.data.data.name;
							self.peoplePie.series[0].data = response.data.data.date;
							self.drawPie()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            getPieData:function(value){
            	
            	this.activeButton = value;
            	this.getPeoplePieInfo()
            },
            
            
            

            //第二部分
//          toggle1: function() {
//              if(this.popupVisible1) {
//                  this.popupVisible1 = false;
//              } else {
//                  this.popupVisible1 = true;
//              }
//
//          },
            drawLine_average() {
                this.$nextTick(function() {
                    let myChart = this.$echarts.init(this.$refs.line_average, 'hengyi')
                    myChart.clear();
                    myChart.setOption(this.linedata_average);
                    myChart.resize();
                })
            },
            drawLine_excellent() {
                this.$nextTick(function() {
                    let myChart = this.$echarts.init(this.$refs.line_excellent, 'hengyi')
                    myChart.clear();
                    myChart.setOption(this.linedata_excellent);
                    myChart.resize();
                })
            },
            drawLine_pass() {
                this.$nextTick(function() {
                    let myChart = this.$echarts.init(this.$refs.line_pass, 'hengyi')
                    myChart.clear();
                    myChart.setOption(this.linedata_pass);
                    myChart.resize();
                })
            },
            drawline_less() {
                this.$nextTick(function() {
                    let myChart = this.$echarts.init(this.$refs.line_less, 'hengyi')
                    myChart.clear();
                    myChart.setOption(this.linedata_less);
                    myChart.resize();
                })
            },
//          drawLine_promote() {
//              this.$nextTick(function() {
//                  let myChart = this.$echarts.init(this.$refs.line_promote, 'hengyi')
//                  myChart.clear();
//                  myChart.setOption(this.linedata_promote);
//                  myChart.resize();
//              })
//          },
            //获取tab2的所有折线图
            getAllLine: function() {
                var self = this;
                let url = api.apidomain + '/tqes/web/squaAnalysisScoreTrend/getScoreTrendByParms';
                this.$http.post(url, {
                        "gradeId": this.gradeSelectValue,
                        "classesId":this.classSelectValue,
                        "subjectId":this.subjectSelectValue,
                        "schoolYear":this.studyYearSelectValue,
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                            self.linedata_average.xAxis.data = response.data.data.average;
							self.linedata_average.series = response.data.data.averageData;
							
							self.linedata_excellent.xAxis.data = response.data.data.excellentRate;
							self.linedata_excellent.series = response.data.data.excellentRateData;
							self.linedata_pass.xAxis.data = response.data.data.passRate;
							self.linedata_pass.series = response.data.data.passRateData;
							self.linedata_less.xAxis.data = response.data.data.lowScoreRate;
							self.linedata_less.series = response.data.data.lowScoreRateData;
							
							self.drawLine_average()
							self.drawLine_excellent()
		                    self.drawLine_pass()
		                    self.drawline_less()
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
            
            
            

            //第三部分
            //获取学生数据
            getStudentResult: function() {
                var self = this;
                let url = api.apidomain + '/tqes/web/squaAnalysisExamDetail/getStudentExamDetail';
                this.$http.post(url, {
                		"dept":this.departmentSelectValue,
                        "gradeId": this.gradeSelectValue,
                        "classId":this.classSelectValue,
                        "analysisId":this.examSelectValue,
                        "subjectId":this.subjectSelectValue,
                        "schoolYearStart":this.studyYearSelectValue
                    }).then(function(response) {
                        if(response.data.success == true) {
                            console.log(response.data.data)
                            self.studentResultArr = response.data.data;
                        } else if(response.data.success == false) {
                            Toast({
                                message: response.data.msg,
                                position: 'middle',
                                duration: 2000
                            });
                        }

                    })
                    .catch(function(error) {
                        Toast({
                            message: '系统发生错误',
                            position: 'middle',
                            duration: 2000
                        });
                    });
            },
//          toggle2: function() {
//              if(this.popupVisible2) {
//                  this.popupVisible2 = false;
//              } else {
//                  this.popupVisible2 = true;
//              }
//
//          },
            studentResult: function(idValue) {
                console.log(idValue)
                setsessionstorage('schoolYearStart',this.studyYearSelectValue);
                setsessionstorage('analysisId',idValue);
                this.$router.push({
                    name: 'StudentResult'
                })
            }
        },
        watch: {
            selected: function(newValue, oldValue) {
                if(this.chartmounted2 == false && newValue == 2) {
                    
                    this.drawLine_average()
					this.drawLine_excellent()
                    this.drawLine_pass()
                    this.drawline_less()
//                  this.drawLine_promote()
                    this.chartmounted2 = true;
                }
                if(newValue == 2){
                	this.getAllLine()
                }
                if(newValue == 3){
                	this.getStudentResult()
                }

            }
        }
    }
</script>

<style scoped>
    .active {
        background-color: #EDF2FB !important;
        color: #517EDB;
        background-image: url(../../../static/image/performanceAppraisal/select.png);
        background-repeat:no-repeat; 
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .buttonActive{
    	background-color: #517EDB !important;
    	color: #fff;
    }
    .mint-navbar .mint-tab-item {
        font-size: 15px !important;
    }
    
    .mint-navbar .mint-tab-item.is-selected {
        margin-bottom: 0px !important;
    }
    
    .mint-popup {
        margin-top: 102px;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    
    .mui-content {
        background-color: white;
    }
    
    .mui-table-view-cell:after {
        height: 0px;
    }
</style>